<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">{{goods.name}}-特产图片</block>
		</cu-custom>
		
		<view class="bg-white padding" v-if="isInit">
					
			<view class="grid col-3 grid-square">
				<view style="position: relative;" class="bg-img padding-xs" @tap="showImageWin" :data-now="index" v-for="(item,index) in list" :key="index" :style="[{ backgroundImage:'url(' + list[index].image + ')' }]">
					<view class="text-cut text-white text-bold text-xs" style="position:absolute;bottom:5px;left:5px;width: 100%;">
						{{item.name}} {{item.type==0?'官方':'评论'}}
					</view>
				</view>
			</view>
			
			<imageView :title="showImage.title" :showModel="showImage.model" :isOneWriter="false" :imageIndex="showImage.index" :images="showImage.images" @closeWin="closeImageWin"></imageView>
		
		</view>
		<view class="cu-load load-modal" v-else-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import imageView from '@/components/image-view/image-view.vue';
	
	export default {
		components:{
			imageView
		},
		data() {
			return {
				isInit:false,
				list:[],
				images:[],
				showImage:{
					model:false,
					index:0,
					title:"",
					avatar:""
				},
			}
		},
		onLoad(option) {
			//更新类型时返回
			if(option.id){
				this.gid=option.id
			}
			this.$api.post('/goods/image_list',{gid:this.gid}).then(res => {
				this.list=res.data
				this.images=res.data
				setTimeout(()=>this.isInit=true,500)
			}).catch(error=>{
				uni.showToast({
					icon: 'none',
					title: '网络异常'
				})
			})
		},
		computed:{
			...mapGetters({'goods':'goods'}),
		},
		methods: {
			closeImageWin(){
				this.showImage.model=false
			},
			showImageWin(e){
				
				this.showImage.images=this.images
				this.showImage.index=e.target.dataset.now
				
				this.showImage.model=true
			}
		}		
	}
</script>

<style scoped>
</style>